import React from 'react';
import Block from 'fs-flex'
import { DatePicker,List,Modal } from 'antd-mobile';
import { Grid,Badge  } from 'antd-mobile';
import Header from '../../../../components/Header/index';
import HolidayService from '../../../../services/holidayService';
import Canstant from '../../../../utils/constant'
import DateUtil from '../../../../utils/dateUtil'
import styles from './index.less';

const operation = Modal.operation;

 class Holiday extends React.Component{
     state={
         date:new Date(),
         currentMonth:[]// 当月数据
     }
     
     async componentDidMount(){
        this.queryDayByMonth(this.state.date)
     }

     async queryDayByMonth(date){
        const moth=DateUtil.dateFtt('yyyyMM',date)
        const {code,data}=await HolidayService.queryDayByMonth(moth)
        if(code === Canstant.responseOK){
            this.setState({currentMonth:data})
        }
        
     }

     // 日期选择改变
     dateChange=(date)=>{
         this.setState({date})
         this.queryDayByMonth(date)
         // 请求后台查询当月已设置节假日情况
     }

     //点击item触发
     itemClick(item){
        const {dateType,dayShortDesc}=item
        const menuGroup=[]
        if(dateType==='H'){
            menuGroup.push({ text: '取消节假日', onPress: () => this.holidayMannger(dayShortDesc,'W')},)
        }else{
            menuGroup.push({ text: '设置节假日', onPress: () => this.holidayMannger(dayShortDesc,'H')},)
        }
        operation(menuGroup)
     }

     // 设置或者取消节假日
     async holidayMannger(dayShortDesc,dateType){
        const moth=DateUtil.dateFtt('yyyy-MM-dd',new Date(dayShortDesc))
        const {code}=await HolidayService.holidayMannger([
            {
                type:dateType,
                date:moth
            }
        ])
        if(code===Canstant.responseOK){
            this.queryDayByMonth(this.state.date)
        }
     }
     
     // 休息日样式——未选中
     restDay={
        backgroundColor:'rgb(245, 213, 213)',
    }
    // 休息日样式——选中
    restDayChecked={
        backgroundColor:'red',
        color:'#fff'
    }
     renderItem=(dataItem)=>{
        const {weekDesc,dateType,dayShortDesc}=dataItem
        const day=DateUtil.gitDayNumer(dayShortDesc)
        if (dateType==='H'){
            return (
                <Badge className={styles.dayItem} text='休息' style={{marginTop:'3px',fontSize:'10px'}} hot corner>
                    <Block className={styles.dayItem} style={this.restDay} a='c' j='c' f={1} vf onClick={this.itemClick.bind(this,dataItem)}>
                        <Block mt={15} fs={18} f={1}>{day} 号</Block>
                        <Block mt={10} h={20} a='c' j='c' style={{ color: '#888', fontSize: '12px',}}>
                            <span>{weekDesc}</span>
                        </Block>
                    </Block>
                </Badge>
                
            )
        }else{
            return(
                <Block className={styles.dayItem} style={weekDesc==='星期日' || weekDesc==='星期六'?this.restDay:null} a='c' j='c' f={1} vf onClick={this.itemClick.bind(this,dataItem)}>
                    <Block mt={15} fs={18} f={1}>{day} 号</Block>
                    <Block mt={10} h={20} a='c' j='c'  style={{ color: '#888', fontSize: '12px',}}>
                        <span>{weekDesc}</span>
                    </Block>
                </Block>
            )
        }
        
     }

     render(){
         const {currentMonth}=this.state
         return(
             <Block>
                <Block>
                    <Header needBack={true} history={this.props.history} title='节假日管理'/>
                </Block>
                <Block>
                <DatePicker
                    mode="month"
                    format={date=>DateUtil.dateFtt('yyyy-MM',date)}
                    title="选择月份"
                    extra="选择月份"
                    value={this.state.date}
                    
                    onChange={this.dateChange}
                    >
                    <List.Item arrow="horizontal">选择月份</List.Item>
                    </DatePicker>
                </Block>
                <Block>
                    <Grid 
                        columnNum={5} 
                        data={currentMonth} 
                        activeStyle={true}
                        square={true}
                        renderItem={(dataItem) => this.renderItem(dataItem)}
                     />
                </Block>
             </Block>
         )
     }
 }

 export default Holiday;
